<template>
  <div>
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="我的跟帖"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon name="wap-home-o" color="#f00" size="6vw" />
      </template>
    </van-nav-bar>
    <!-- 2.0评论列表 -->
    <div class="item">
        <div class="item" v-for="item in List" :key="item.id">
            <p class="date">{{item.create_date}}</p>
            <!-- 引用 -->
            <div class="parent" v-if="item.parent">
                <p>回复：{{item.parent.user.nickname}}</p>
                <p>{{item.parent.content}}</p>
            </div>
            <p class="comment">{{item.content}}</p>
            <p class="article">
                <router-link class="article_link" :to="`aritcle/${item.post.id}`">原文{{item.post.title}}</router-link>
            </p>
        </div>
    </div>
  </div>
</template>

<script>
import {UsercommentsListApi}  from "../apis/user.js"
export default {
    data () {
        return {
            List:[]
        }
    },
  async  created () {
        const res =  await  UsercommentsListApi()
        console.log(res);
        this.List = res.data.data
    }
};
</script>

<style lang="less" scoped>
.item {
  .item {
      padding: 10px;
      border-bottom: 1px  solid #ddd;
      p{
          margin: 10px 0;
      }
    .date {
        color: #666;
        font-size: 13px;
    }

    .comment {
        font-size: 14px;
    }

    .article {
        font-size: 14px;
        display: flex;
    }
  }
  .article_link{
      color: inherit;
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .parent{
      background-color: #e4e4e4;
      color: #666;
}
}

</style>>
